{% extends "base.html" %}
{% load mezzanine_tags keyword_tags %}

{% block meta_title %}{{ page.meta_title }}{% endblock %}

{% block meta_keywords %}{% metablock %}
{% keywords_for page as keywords %}
{% for keyword in keywords %}
    {% if not forloop.first %}, {% endif %}
    {{ keyword }}
{% endfor %}
{% endmetablock %}{% endblock %}

{% block meta_description %}{% metablock %}
{{ page.description }}
{% endmetablock %}{% endblock %}

{% block title %}
{% editable page.title %}{{ page.title }}{% endeditable %}
{% endblock %}

{% block main %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript">
 var blogposts = angular.module('blogposts',[]);
blogposts.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});
 blogposts.controller('blogController', function($scope, $http) {
     $http.get('/api/v1/app/?limit=600&format=json').success(function(data) {
         $scope.posts = data["objects"];
    });
 });
</script>
<section class="allposts section--center mdl-grid mdl-grid--no-spacing mdl-cell--11-col">
    <div class="mdl-card__supporting-text">
        <div ng-app="blogposts">
            <div class="posts" ng-controller="blogController">
                <ul>
                    <li ng-repeat="post in posts"><a href="/blog/{[{post.slug}]}">{[{post.title}]}</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>
{% endblock %}
